import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Popconfirm, Divider, Button, Input, Modal } from 'antd';
import { connect } from 'umi';
import moment from 'moment';
import ContentEdit from './contentEdit';
import MyModuleSet from './myModuleSet';
import UploadUtil from '../UploadUtil';

const { Search } = Input;
class MyModule extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            checkedList: [],
            visible: false,
            selectedRowKeys: [],
            payload: {
                SkipCount: 0,
                MaxResultCount: 10,
            }
        }
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: "UserModule/getUserModule",
        }).then(() => {
            var resp = this.props.UserModule.response;
            if (resp) {
                var dataSource = resp.result;
                var checkedList = [];
                if (dataSource) {
                    dataSource.forEach(item => {
                        checkedList.push(item.moduleId);
                    });
                }
                this.setState({ loading: false, dataSource, checkedList });
            }
        });
    }
    handleDelete = (id) => {
        this.props.dispatch({
            type: "CrudModel/delete",
            payload: { id },
            control: 'UserModule'
        });
        this.fetchDatas();
    }
    handleEdit = (record) => {
        this.props.dispatch({
            type: "UserModule/setCurrent",
            payload: record,
        });
        this.switchModal(true);
    }
    handleAdd = () => {
        this.props.dispatch({
            type: "UserModule/setCurrent",
            payload: {},
        });
        this.switchModal(true);
    }
    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    };
    onSearch = (value) => {
        var payload = this.state.payload;
        payload.keywords = value;
        console.log(payload)
        this.setState({ payload }, () => {
            this.fetchDatas();
        });

    }
    switchModal = (visible) => {
        this.setState({ visible });
    };
    handleGetReg = () => {
        window.location = "http://localhost:21021/Home/GetAppRegFile";
    }
    render() {
        const { loading, dataSource, selectedRowKeys } = this.state;
        const columns = [
            {
                dataIndex: 'logo',
                width: 80,
                render: (text) => (
                    text ? (<img style={{ width: 36, height: 36 }} src={UploadUtil.imgServ + text} />) : null
                ),
            },
            {
                title: '应用名称',
                dataIndex: 'moduleName',
            },
            {
                title: '序号',
                dataIndex: 'orderId',
            },
            {
                title: '操作',
                render: (record) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                                <a>删除</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <a onClick={() => this.handleEdit(record)}>设置</a>
                        </span>
                    ) : null,
            },
        ];
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <PageHeaderWrapper title={false}>
                <Card>
                    <Button type="primary"
                        onClick={this.fetchDatas}
                        loading={loading} >刷新</Button>
                    <Divider type="vertical" />
                    <Button type="primary" onClick={this.handleAdd} >添加</Button>
                    <Divider type="vertical" />
                    <Search style={{ width: 240 }} placeholder="输入关键词搜索" onSearch={value => this.onSearch(value)} />
                    <Divider type="vertical" />
                    <Button type="primary" onClick={this.handleGetReg} >生成注册表</Button>
                    <span style={{ marginLeft: 8 }}>
                        {hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}
                    </span>
                    <Divider />
                    <Table
                        rowKey="id"
                        loading={loading}
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={dataSource} />
                </Card>
                <Modal
                    title={<b>应用设置</b>}
                    visible={this.state.visible}
                    onOk={() => this.switchModal(false)}
                    onCancel={() => this.switchModal(false)}
                    footer={null}
                    destroyOnClose={true}>
                    <MyModuleSet switchModal={this.switchModal} />
                </Modal>
            </PageHeaderWrapper>
        )
    }
}

export default connect(({ user, CrudModel, UserModule }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    UserModule,
}))(MyModule);